<template>
  <div class="dada">
    <!-- 头部 -->
    <!-- monry:{{ money }} -->
    <van-image
      style="position: relative"
      width="100%"
      height="12rem"
      src="/me_img/background.jpg"
    >
      <van-image
        class="top"
        round
        width="3.5rem"
        height="3.5rem"
        src="/me_img/head_portrait.jpg"
      />
      <!-- 登录前 -->
      <p @click="tologin" class="top_zi" v-if="user == null">点击登陆</p>
      <!-- 登录后 -->
      <p class="top_zi" v-else>
        <span v-if="person_name != null">{{ person_name }}</span>
        <span v-else>{{ user }}</span>
      </p>
    </van-image>

    <!-- 单元格 -->
    <van-row
      @click="toVip"
      class="vip-tip"
      style="width: 90%; margin-top: 20px"
    >
      <van-col span="16">开通读者蜂巢会员,尽享更多权益</van-col>
      <van-col span="5" style="margin-left: 22px">加入会员</van-col>
      <van-col span="1">></van-col>
    </van-row>
    <van-cell-group class="cell">
      <van-cell
        v-if="!islogin"
        title="个人信息"
        icon="/me_img/myself.png"
        is-link
        to="/login"
      />
      <van-cell
        v-else
        title="个人信息"
        icon="/me_img/myself.png"
        is-link
        to="/modify"
      />
    </van-cell-group>
    <van-cell-group class="cell">
      <van-cell
        title="我的钱包"
        icon="/me_img/wallet.png"
        is-link
        to="wallet"
      />
      <van-cell title="优惠专区" icon="/me_img/coupon.png" is-link to="index" />
    </van-cell-group>
    <van-cell-group class="cell">
      <van-cell title="会员广场" icon="/me_img/vip.png" is-link to="/vip" />
    </van-cell-group>
    <van-cell-group class="cell">
      <van-cell
        title="联系客服"
        icon="/me_img/service.png"
        is-link
        to="index"
      />
    </van-cell-group>
    <!-- <van-cell-group class="cell">
      <van-cell title="切换账号" is-link to="/login" />
    </van-cell-group> -->
    <van-cell-group>
      <van-cell
        v-if="user != null"
        value="切换账号"
        @click="logout"
        url="/login"
      />
    </van-cell-group>

    <back-home />
    <!-- 底部标签栏Tabbar -->
    <van-tabbar v-model="active" active-color="#3eaf7c">
      <van-tabbar-item icon="wap-home" name="/" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="goods-collect" name="/order" to="/order"
        >已购</van-tabbar-item
      >
      <van-tabbar-item icon="friends" name="/me" to="/me">我的</van-tabbar-item>
      <router-view />
    </van-tabbar>
  </div>
</template>

<script>
// 要通过 state.user 来判定登录状态与否, 显示不同的项目UI
// 辅助函数: mapMutations , 快速引入
import { mapState, mapMutations } from 'vuex'
import BackHome from '../components/BackHome.vue'
export default {
  data() {
    return {
      active: '/me',
    }
  },
  mounted() {},
  watch: {
    '$route.path': {
      handler(val) {
        this.active = val
      },
      immediate: true,
    },
  },
  methods: {
    ...mapMutations([
      'updateUser',
      'updatePname',
      'updateUserId',
      'updateMoney',
    ]),
    logout() {
      sessionStorage.removeItem('islogin')
      sessionStorage.removeItem('id')
      sessionStorage.removeItem('user')
      sessionStorage.removeItem('person_name')
      // sessionStorage.removeItem()
    },
    toVip() {
      this.$router.push('vip')
    },
    tologin() {
      this.$router.push('/login')
    },
  },
  components: { BackHome },
  computed: {
    ...mapState(['user', 'person_name', 'id', 'money', 'islogin']),
  },
}
</script>

<style scoped>
.dada {
  background: #f7f7f7;
  height: 100vh;
}
.top {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -80%);
}
.top_zi {
  margin-top: 20px;
  font-size: 22px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
.cell {
  margin-bottom: 10px;
}
.van-cell__value {
  text-align: center;
}
.logout {
  width: 100vw;
  text-align: center !important;
}
.vip-tip {
  height: 42px;
  line-height: 42px !important;
  padding: 0 4.776%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  background: url('/me_img/vip-bg.png') 0 0 no-repeat;
  background-size: 100% 100%;
  font-size: 14px;
  color: #776041;
  line-height: 22px;
}
</style>
